<template>
  <div class="card">
    <h3>单一文件上传「缩略图处理」</h3>
    <section class="upload_box" id="upload3">
      <input
        ref="inputRef"
        type="file"
        class="upload_inp"
        accept=".jpg,.jpeg,.png"
        @change="changeFile"
      />
      <div class="upload_button_box">
        <button
          class="upload_button select"
          :class="[loading ? 'disable' : '']"
          @click="selectFile"
        >
          选择文件
        </button>
        <button
          class="upload_button upload"
          :class="[loading ? 'loading' : '']"
          @click="uploadFile"
        >
          上传到服务器
        </button>
      </div>
      <div class="upload_abbre">
        <img v-for="item in filelist" :src="item.url" :key="item.url" alt="" />
      </div>
    </section>
  </div>
</template>

<script setup>
import { useUploadSingle } from "@/hook";
// 封装上传钩子
let { inputRef, loading, filelist, selectFile, changeFile, uploadFile } =
  useUploadSingle({ preview: true, isHashName: true });
</script>

<style>
.upload_abbre {
  display: block !important;
}
</style>
